/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, Input, Button, useToast,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, useInputControlSure,
} from "../common/base";
import {useMeasureInpFilter} from "../common/hooks";
import queryString from "query-string";
import {tableSetInp} from "../../common/tool";
import {useUppyUploadM} from "../hook/useUppyUploadM";
import {useContext} from "react";
import UserContext from "../../routing/UserContext";
import '@uppy/core/dist/style.min.css';
import '@uppy/dashboard/dist/style.min.css';
import '@uppy/webcam/dist/style.min.css';
import {EditStorageContext} from "../StorageContext";
import {Link as RouterLink} from "../../routing/Link";

//锅炉也直接用：
//单线图 打印每张一个图， 带对象，有折叠；
export const itemA部件图=['部图表'];
export const SingleLineDiagram=
    React.forwardRef(({ children, show ,alone=true,repId,redId,nestMd,refWidth,rep}:InternalItemProps,  ref
    ) => {
        const {user} = useContext(UserContext);
        const qs= queryString.parse(window.location.search);
        const dxtix =Number(qs?.dxtix) || 0;
        const {modified,setModified,} =React.useContext(EditStorageContext) as any;
        const [getInpFilter]=useMeasureInpFilter(null,itemA部件图,);
        const {inp, setInp,onSure} = useInputControlSure({ ref,redId,nestMd });
        const dxtSize= inp?.部图表?.length || 0;
        const row=undefined===inp?.部图表?.[dxtix]? dxtSize : dxtix;
        const onFinish = React.useCallback(async(forRow:number, upfile: any, del:boolean) => {
            // console.log("切黄-上传控件状态dxtix=",dxtix,"forRow=",forRow, "row=",row );
            if(inp){             //底下俩个变量不能够采用函数以外的，依赖出问题？？导致更新会不正常的。
                tableSetInp('部图表', row, inp, onSure, '_FILE_', del? undefined : upfile);
                !modified && setModified(true);
            }
        }, [row, dxtix, inp, modified,onSure,setModified]);
        const [uploadDom]=useUppyUploadM({repId:rep?.id, table:'部图表',
                           row: row,  inp, setInp, onFinish, liveDays:1});

       return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={`部件示意图 ${dxtix+1} 的管理`}>
                <Text variant="h5">
                 当前部件示意图的序号：{dxtix +1}； 新增加一个图的上传
                </Text>
                ( <Input value={inp?.部图表?.[dxtix]?.til || ''} style={{display: 'inline-flex', width: 'unset'}}
                         onChange={e =>tableSetInp('部图表', dxtix, inp, setInp, 'til', e.currentTarget.value||undefined)
                         }/> )  部件示意图
                {uploadDom}
                <hr/>
                签字人是谁：{inp?.部图表?.[dxtix]?.sgm?.name || ''}。<br/>
                {inp?.部图表?.[dxtix]?.sgm?.username === user?.username ?
                    <Button intent="warning"
                            onPress={async () => {
                                await tableSetInp('部图表', dxtix, inp, setInp, 'sgm', undefined);
                            }}
                    >去除签名</Button>
                    :
                    <Button intent="warning"
                            onPress={async () => {
                                const me = {username: user?.username, name: user?.person?.name};
                                await tableSetInp('部图表', dxtix, inp, setInp, 'sgm', me);
                            }}
                    >签名</Button>
                }
                <hr/>
                <RouterLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/DiagramManager?dxtix=${dxtix}#DiagramManager`}>
                    <Text  variant="h4" css={{"@media print": {display: 'none',},
                    }}>部件示意图的管理对象的删除</Text>
                </RouterLink>
            </InspectRecordLayout>
        );
    } );

//部件图: 类比 单线图 管理模式的；
export const DiagramManager=
    React.forwardRef(({ children, show ,alone=true,repId,redId,nestMd,refWidth,rep}:InternalItemProps,  ref
    ) => {
        const toast = useToast();
        const qs= queryString.parse(window.location.search);
        const dxtix =Number(qs?.dxtix) || 0;
        const [getInpFilter]=useMeasureInpFilter(null,itemA部件图,);
        const {inp, setInp,onSure} = useInputControlSure({ ref,redId,nestMd });
        const [delNo, setDelNo] = React.useState<number>(dxtix+1);
        const [delSize, setDelSize] = React.useState<number>(1);
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={'部件示意图-对象整理'}>
                <Text variant="h4">
                    部件示意图的管理对象的删除：
                </Text>
                空的图需要删掉管理对象，不然正式报告打印有空白图那页。<br/>
                依据示意图的序号把它从报告中抹去，注意需首先删除已上传的示意图并确认。
                <br/><br/>
                <Text variant="h5">
                    依据排序：把示意图的序号<Input value={delNo || 0} style={{display: 'inline-flex', width: 'unset'}}
                                                  max={1000} min={1} type={"number"}
                                                  onChange={e => setDelNo(Number(e.currentTarget.value))}/>
                    开始的，<Input value={delSize} style={{display: 'inline-flex', width: 'unset'}}
                                  max={999} min={1} type={"number"}
                                  onChange={e => setDelSize(Number(e.currentTarget.value))}/>个序号的示意图管理对象删除掉。
                    <Button intent="danger" disabled={!delNo || (delNo! - 1 >= inp?.部图表?.length) || delSize <= 0}
                            onPress={async () => {
                                for (let i = delNo! - 1; (i < delNo! + delSize - 1 && i < inp?.部图表?.length); i++) {
                                    if ((inp?.部图表?.[i]?._FILE_?.url)) {
                                        toast({
                                            title: "需首先删除已上传的示意图并确认",
                                            subtitle: "管理序号" + (i + 1) + "，原图名:" + inp?.部图表?.[i]?._FILE_?.name,
                                            intent: "error"
                                        });
                                        return;
                                    }
                                }
                                const delIdx = delNo! - 1;
                                inp?.部图表?.splice(delIdx, delSize);
                                setInp({...inp, 部图表: inp?.部图表,});      //等效setInp({...inp})
                            }}
                    >执行</Button>删除示意图管理对象。
                </Text><br/>
                <hr/>
                <Text variant="h6">
                    注意，动态性，删除一个序号，其余的序号的图会候补刚刚删除的序号，所以删前需确认图片。
                </Text>
            </InspectRecordLayout>
        );
    } );
